<template>
    <div>
        <nav-bar>
          <!-- v-slot: 缩写  语法糖  # -->
          <template  #left>
            <button>{{leftContent}}</button>
          </template>
          <template  #center>
            <span>内容</span>
          </template>
          <template v-slot:right>
          <a href="#">登录</a>
          </template>
        </nav-bar>
        <h2>-----------------</h2>
        <!-- nav-bar只给一个插槽传入数据 position变量 -->
        <nav-bar>
          <template v-slot:[position]>
            <a href="#">haha</a>
          </template>
        </nav-bar>
        <button @click="position = 'left'">左边</button>
        <button @click="position = 'center'">中间</button>
        <button @click="position = 'right'">右边</button>
    </div> 
  </template>

  
  <script>
    /* import { forMe } from "@/api/index";*/
    import NavBar from './NavBar.vue';
    export default {
      //name 指定不重复即可
      name: "index",
      components: {
        //引入组件
        NavBar
      },
      props: [],
      data() {
        return {
          //变量定义 放置数据值，相当于默认值 相似于js中全局变量
          position:"center",
          leftContent:"返回"
        };
      },
      activated() {
        //动态加载钩子函数 在该函数内调用的方法会有页面跳转路由
        //会再次重新获得生命周期
      },
      created() {
        //加载钩子函数 组件创建完成没有渲染时触发 获取页面数据 未加载DOM结构
        //相当于 jQ中加载函数
      },
      watch:{
        //监听
      },
      mounted() {
        //组件渲染之后触发 页面已获取数据 并且组件已渲染
  
      },
      methods: {
  
  
      },
    };
  </script>
    <style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
  </style>
  <style>
    /*全局css 支持css3 可以改变elementUI组件的样式 样式调整在整个系统所有页面生效
      【警告注意: 可能会造成其他页面样式污染 需谨慎使用】 **/
  
  </style>